<template>
	<view class="container">
		<view class="title">
			我的{{type=="2"?"信用卡":"磁条卡"}}({{accountList.length}})张
		</view>
		<scroll-view style="height: calc(100% - 106rpx)" scroll-y @scrolltolower="loadMoreData">
			<view v-for="(item, index) in accountList" :key="index" class="card">
				<view class="card-bank">
					<img src="/static/icon/yl_icon.png" class="logo" />
					<view>
						<view class="bank-name">{{item.bankName }}</view>
						<view class="default"> {{item.bankType=="XYK"?"信用卡":"磁条卡"}} </view>
					</view>
				</view>
				<view class="no">{{ item.accountNo.replace(/^(.{6})(?:\d+)(.{4})$/,"$1******$2") }}</view>
				<view class="unbind" @click="goUnbind(item)">
					<view class="">
						解除绑定
					</view>
					<image src="../../static/icon/unbind_icon.png" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		queryReport
	} from "@/api/common.js";
	import {
		bankCardList,
		unbindBank
	} from "@/api/mine.js";
	import {
		showToast
	} from "@/utils/toast";
	import {
		navigate
	} from "@/utils/router";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import DragButton from "@/components/button/drag-button/index.vue";
	import {
		useStore
	} from "@/store";
	const store = useStore();
	// 报表查询条件
	let queryParams = ref({
		id: 1001,
		page: 1,
		size: 20,
		conditions: [{
			code: "userId",
			operator: "eq",
			value: store.userInfo.id
		}],
		oemUserNo: 'BU100002'
	});
	let params = reactive({

		userId: store.userInfo.userId,
		cardNo: ""
	});

	// 银行卡总数
	let total = ref(0);
	// 账户列表
	let accountList = ref([

	]);
	let settleStatus = ref(null);
	// 代理名称、身份证号
	let type = ref(null);
	let bankType = ref(null);
	onLoad((option) => {
		if (option) {
			type.value = option.type;
			bankType.value = type.value == "2" ? "XYK" : "MC";
			uni.setNavigationBarTitle({
				title: type.value == "2" ? '信用卡管理' : '磁条卡管理' // 设置的新标题
			});
		}
	});

	onShow(() => {

		getAccountList();
	});

	// 查询账户列表
	function getAccountList() {
		bankCardList(store.userInfo.userId, bankType.value).then((res) => {

			total.value = res.length;
			accountList.value = res;

			settleStatus = res.length > 0 ? "1" : "0";

			uni.setStorageSync("settleStatus", settleStatus);
		});
	}

	// 加载下一页
	function loadMoreData() {
		if (queryParams.value.page * queryParams.value.size < total.value) {
			queryParams.value.page++;
			getAccountList();
		} else {
			showToast("没有更多数据了");
		}
	}

	// 加密银行卡号
	function encryptNo(no) {
		const length = no.length;
		const remainder = length % 4;
		const startIndex = length - (remainder === 0 ? 4 : remainder);
		const lastFourNo = no.substring(startIndex, length);
		return (
			"**** ".repeat(remainder === 0 ? length / 4 - 1 : length / 4) + lastFourNo
		);
	}

	// 跳转至账户详情页
	function toDetail(item) {
		navigate(
			`/pagesMine/withdrawal-account/account-detail/index?cardInfo=${encodeURIComponent(
			JSON.stringify(item)
		)}`
		);
	}

	function goUnbind(item) {
		uni.showModal({
			title: '提示',
			content: '确定解绑该卡？',
			showCancel: true,
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					params.cardNo = item.accountNo;
					unbindBank(params).then((res) => {
						getAccountList();
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
</script>

<style>
	Page {
		background: white;
	}
</style>
<style lang="scss" scoped>
	@import './index.scss';
</style>